<template>
  <div>
    <div style="width: 50% margin-top:50px">
      <div id="pie" style="width: 100%; height: 400px"></div>
    </div>

    <div style="width: 50% margin-top:50px">
      <div id="pie2" style="width: 100%; height: 400px"></div>
    </div>
    <div style="width: 50% margin-top:50px">
      <div id="pie3" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.searchData();
    this.searchReceiveUnitData();
    this.searchUnitData();
  },
  methods: {
    searchData() {
      this.$axios.get("/data/searchDiff").then((res) => {
        const data = res.data.data;
        const chartData = data.map((item) => ({
          name: item.type,
          value: item.receivable,
        }));
        this.initpie(chartData);
      });
    },
    initpie(chartData) {
      let chartDom = document.getElementById("pie");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        title: {
          text: "应付款成次品对比",
          subtext: "按比例分配",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 11048, name: "退款" },
              { value: 5735, name: "货款" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    searchReceiveUnitData() {
      this.$axios.get("/data/searchReceiveUnit").then((res) => {
        const data = res.data.data;
        const chartData = data.map((item) => ({
          name: item.cname,
          value: item.receivable,
        }));
        this.initpie2(chartData);
      });
    },
    initpie2(chartData) {
      let chartDom = document.getElementById("pie2");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        title: {
          text: "应付款--货款(前五)",

          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [ { value: 11048, name: "腾讯卖菜" },
              ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    searchUnitData() {
      this.$axios.get("/data/searchReceiveUnit").then((res) => {
        const data = res.data.data;
        const chartData = data.map((item) => ({
          name: item.cname,
          value: item.receivable,
        }));
        this.initpie3(chartData);
      });
    },
    initpie3(chartData) {
      let chartDom = document.getElementById("pie3");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        title: {
          text: "应收款成次品对比",

          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [ { value: 11048, name: "腾讯卖菜" },
              { value: 55735, name: "阿里卖菜" },],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
</style>